import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtTextarea,AtButton,AtMessage } from 'taro-ui'

import '../pages/index/index.scss';

export default class Qrcode extends Component {
  constructor() {
    super(...arguments)
    this.state = {
      qrcode:'',
      value: '',
      isLoading:false,
    }
  }

  handleChange (event) {
    this.setState({
      value: event.target.value
    })
  }

  handleClick(){
    const {value,isLoading,qrcode}=this.state;
    if(value.trim() === ''){
      Taro.atMessage({
        'message': '不能为空',
        'type': 'error',
      })
      return;
    }
    const url = 'https://apis.juhe.cn/qrcode/api';
    const data={
      key:'0371dbcdac7089caec0f15c193518f99',
      text:value,
      w:160,
      m:0
    }
    Taro.request({url,data}).then(res => this.setState({qrcode:res.data.result.base64_image}))
  }

  render() {
    const {data}=this.props;
    const {value,isLoading,qrcode}=this.state;
    return (
      <View className='qrcode'>
        <AtTextarea
          value={value}
          onChange={this.handleChange.bind(this)}
          maxLength={200}
          height={200}
          placeholder='请输入内容'
        />
        <View className='qrcode__btn'>
          <AtButton loading={isLoading} type='primary' onClick={this.handleClick.bind(this)}>点击生成二维码</AtButton>
        </View>
        <View
          className='qrcode__img' style={{background:`url(data:image/png;base64,${qrcode}) no-repeat center`}}>
        </View>
        <AtMessage />
      </View>
    )
  }
}

